<!doctype html>
<html>
<head>
	<title>HTML5 Page</title>

	<style></style>

	<script src="../os3jslib/liwe.js"></script>
	<script src="../os3jslib/event.js"></script>
	<script src="../os3jslib/event_manager.js"></script>
	<script src="../os3jslib/types.js"></script>

	<script src="../cwl.js"></script>
	<script src="box.js"></script>
<script>
var dm;
var cwl;

function add_events ( box )
{

	box.addEventListener ( "render", function ( evt ) { 
		var dbox = evt.target;

		dbox.ctx.lineWidth = 2; dbox.ctx.strokeRect ( dbox.x, dbox.y, dbox.w, dbox.h ); 
	} );

	box.addEventListener ( "highlight", function ( evt ) { 
		var dbox = evt.target;

		dbox.ctx.fillStyle = "black"; dbox.ctx.fillRect ( dbox.x, dbox.y, dbox.w, dbox.h ) 
	} );

	box.addEventListener ( "clear", function ( evt ) { 
		var dbox = evt.target;

		dbox.ctx.fillStyle = "white"; dbox.ctx.fillRect ( dbox.x, dbox.y, dbox.w, dbox.h ); } 
	);
	box.addEventListener ( "handles", function ( evt ) { 
			var dbox = evt.target;

                        evt.target.ctx.fillStyle = "red"; 

                        if ( dbox.mode & CWL.TOP_LEFT ) dbox.ctx.fillRect ( dbox.x, dbox.y, dbox.dx, dbox.dy );
                        if ( dbox.mode & CWL.TOP_RIGHT ) dbox.ctx.fillRect ( dbox.x + dbox.w - dbox.dx, dbox.y, dbox.dx, dbox.dy );

                        if ( dbox.mode & CWL.BOTTOM_LEFT )  dbox.ctx.fillRect ( dbox.x, dbox.y + dbox.h - dbox.dx, dbox.dx, dbox.dy );
                        if ( dbox.mode & CWL.BOTTOM_RIGHT ) dbox.ctx.fillRect ( dbox.x + dbox.w - dbox.dx, dbox.y + dbox.h - dbox.dx, dbox.dx, dbox.dy );
                } );
}

function init ()
{
	var canv = $( "my_canvas" );
	var box;
	
	cwl = new CWL ( canv );

	dm = cwl.BoxManager ();

	box = dm.add ( "drag", { mode: CWL.BOTTOM_RIGHT | CWL.BOX_MODE_MOVE, step_x: 50, step_y: 50 } );
	add_events ( box );

	box = dm.add ( "drag2", { x : 150, y : 150, mode: CWL.BOX_MODE_ALL, step_x: 50, step_y: 50 } );
	add_events ( box );
	// dm.add ( "drag3", { x : 310, y : 210 });

	box.hide ();

	cwl.render ();
}
</script>
</head>
<body onload="init()">

<canvas id="my_canvas" width="800" height="600"></canvas>

</body>
</html>
